---
title: Publier sur npm
description: Apprenez comment publier des composants Astro sur npm
---
import { Steps } from '@astrojs/starlight/components';
import { FileTree } from '@astrojs/starlight/components';

Vous développez un nouveau composant Astro ? **Publiez-le sur [npm](https://npmjs.com/)** !

Publier un composant Astro est une excellente façon de réutiliser votre travail existant dans vos projets et de le partager avec la communauté d'Astro à grande échelle. Les composants Astro peuvent être publiés directement et installés depuis npm, comme tout autre paquet JavaScript.

Vous cherchez de l'inspiration ? Regardez quelques-uns de nos [thèmes](https://astro.build/themes/) et [composants](https://astro.build/integrations/) préférés de la communauté d'Astro. Vous pouvez aussi [rechercher sur npm](https://www.npmjs.com/search?q=keywords:astro-component) pour voir l'ensemble du catalogue public.

:::tip[Besoin d'aide ?]
Regardez [le modèle de composant de la communauté Astro](https://github.com/astro-community/component-template) pour un modèle prêt à l'emploi pris en charge par la communauté !
:::

## Démarrage rapide

Pour commencer à développer rapidement votre composant, vous pouvez utiliser un modèle déjà configuré pour vous.

```bash
# Initialise le modèle de composant Astro dans un nouveau répertoire
npm create astro@latest my-new-component-directory -- --template component
# yarn
yarn create astro my-new-component-directory --template component
# pnpm
pnpm create astro@latest my-new-component-directory -- --template component
```

## Création d'un paquet

:::note[Prérequis]
Avant de se lancer, avoir une compréhension basique des sujets suivants vous sera d'une grande aide :

- [Modules Node](https://docs.npmjs.com/creating-node-js-modules)
- [Manifeste du paquet (`package.json`)](https://docs.npmjs.com/creating-a-package-json-file)
- [Espaces de travail](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#workspaces)
:::


Pour créer un nouveau paquet, configurez votre environnement de développement pour utiliser des **espaces de travail** dans votre projet. Cela vous permettra de développer votre composant parallèlement à une copie fonctionnelle d'Astro.

<FileTree>
- my-new-component-directory/
  - demo/
    - ... pour les tests et les démonstrations
  - package.json
  - packages/
    - my-component/
      - index.js
      - package.json
      - ... fichiers additionnels utilisés par le paquet
</FileTree>


Cet exemple, nommé `my-project`, crée un projet avec un seul paquet, nommé `my-component`, et un répertoire `demo/` pour les tests et les démonstrations du composant.

La configuration se fait dans le fichier `package.json` à la racine du projet :

```json
{
  "name": "my-project",
  "workspaces": ["demo", "packages/*"]
}
```

Dans cet exemple, plusieurs paquets peuvent être développés ensemble depuis le répertoire `packages`. Ces paquets peuvent également être référencés depuis `demo`, où vous pouvez installer une copie fonctionnelle d'Astro.

```shell
npm create astro@latest demo -- --template minimal
# yarn
yarn create astro demo --template minimal
# pnpm
pnpm create astro@latest demo -- --template minimal
```

Il y a deux fichiers initiaux qui constituent votre paquet individuel : `package.json` et `index.js`.

### `package.json`

Le fichier `package.json` dans le répertoire du paquet contient toutes les informations relatives à votre projet, y compris sa description, ses dépendances, et toutes autres métadonnées du paquet.

```json
{
  "name": "my-component",
  "description": "Description du composant",
  "version": "1.0.0",
  "homepage": "https://github.com/owner/project#readme",
  "type": "module",
  "exports": {
    ".": "./index.js",
    "./astro": "./MyAstroComponent.astro",
    "./react": "./MyReactComponent.jsx"
  },
  "files": ["index.js", "MyAstroComponent.astro", "MyReactComponent.jsx"],
  "keywords": ["astro","astro-component", "...", "..."]
}
```

#### `description`

Une courte description de votre composant pour aider les autres à comprendre ce qu'il fait.

```json
{
  "description": "Un générateur d'éléments Astro"
}
```

#### `type`

Le format de module utilisé par Node.js et Astro pour interpréter vos fichiers `index.js`.

```json
{
  "type": "module"
}
```

Utilisez `"type": "module"` pour que votre fichier `index.js` puisse être utilisé comme point d'entrée avec `import` et `export`.

#### `homepage`

L'url de la page d'accueil de votre projet.

```json
{
  "homepage": "https://github.com/owner/project#readme"
}
```

C'est une bonne façon de diriger les utilisateurs vers une démonstration, une documentation ou la page d'accueil de votre projet.

#### `exports`

Les points d'entrée d'un paquet lorsqu'il est importé par nom.

```json
{
  "exports": {
    ".": "./index.js",
    "./astro": "./MyAstroComponent.astro",
    "./react": "./MyReactComponent.jsx"
  }
}
```

Dans cet exemple, l'importation de `my-component` utilise `index.js`, tandis que l'importation de `my-component/astro` ou `my-component/react` utilise `MyAstroComponent.astro` ou `MyReactComponent.jsx`, respectivement.

#### `files`

Une optimisation facultative pour exclure les fichiers inutiles du paquet envoyé aux utilisateurs via npm. Notez que **seuls les fichiers listés ici seront inclus dans votre paquet**, donc si vous ajoutez ou modifiez des fichiers nécessaires à votre paquet pour qu'il fonctionne, vous devez mettre à jour cette liste en conséquence.

```json
{
  "files": ["index.js", "MyAstroComponent.astro", "MyReactComponent.jsx"]
}
```

#### `keywords`

Une liste de mots-clés pertinents à votre composant qui sont utilisés pour aider les autres à [trouver votre composant sur npm](https://www.npmjs.com/search?q=keywords:astro-component,withastro) et dans tous les autres catalogues de recherche.

Ajoutez `astro-component`, `astro-integration` ou `withastro` comme mot-clé spécial pour maximiser sa découverte dans l'écosystème Astro.

```json
{
  "keywords": ["astro-component", "withastro", "... etc", "... etc"]
}
```

:::tip
Les mots-clés sont également utilisés par notre [bibliothèque d'intégration](https://astro.build/integrations) ! [Voir ci-dessous](#bibliothèque-dintégrations) pour une liste complète des mots-clés que nous utilisons dans npm.
:::

---

### `index.js`

Le point d'entrée principal du paquet utilisé lorsque celui-ci est importé.

```js
export { default as MyAstroComponent } from './MyAstroComponent.astro';

export { default as MyReactComponent } from './MyReactComponent.jsx';
```

Cela vous permet de mettre plusieurs composants ensemble dans une seule interface.

#### Exemple : Utilisation des importations nommées

```astro
---
import { MyAstroComponent } from 'my-component';
import { MyReactComponent } from 'my-component';
---
<MyAstroComponent />
<MyReactComponent />
```

#### Exemple : Utilisation des importations d'espaces de noms

```astro
---
import * as Example from 'example-astro-component';
---
<Example.MyAstroComponent />
<Example.MyReactComponent />
```

#### Exemple : Utilisation des importations individuelles

```astro
---
import MyAstroComponent from 'example-astro-component/astro';
import MyReactComponent from 'example-astro-component/react';
---
<MyAstroComponent />
<MyReactComponent />
```

---

## Développement de votre paquet

Astro n'a pas de « mode paquet » pour le développement. Au lieu de cela, vous devriez utiliser un projet de démonstration pour développer et tester votre paquet dans votre projet. Cela peut être un site web privé uniquement utilisé pour le développement, ou un site de démonstration/documentation pour votre paquet.

Si vous voulez extraire des composants d'un projet existant, vous pouvez aussi continuer à utiliser ce projet pour développer vos composants maintenant extraits.

## Tester votre composant

Astro ne livre actuellement aucun exécuteur de tests. _(Si vous êtes intéressé·e·s pour aider, [rejoignez-nous sur Discord !](https://astro.build/chat))_

En attendant, nos recommandations actuelles pour les tests sont :

<Steps>
1. Ajoutez un répertoire de test nommé `fixtures` à votre répertoire `demo/src/pages`.
  
2. Ajoutez une nouvelle page pour chaque test que vous souhaitez exécuter.
  
3. Chaque page devrait inclure un usage de composant différent que vous souhaitez tester.
  
4. Exécutez `astro build` pour compiler vos fixtures, puis comparez le résultat de `dist/__fixtures__/` à ce que vous attendiez.
   <FileTree>
   - my-project/demo/src/pages/\_\_fixtures\_\_/
     - test-name-01.astro
     - test-name-02.astro
     - test-name-03.astro
   </FileTree>
</Steps>


## Publier votre composant

Une fois que votre paquet est prêt, vous pouvez le publier sur npm en utilisant la commande `npm publish`. Si cela échoue, assurez-vous que vous vous êtes connecté via `npm login` et que votre `package.json` est correct. Si cela réussit, vous avez fini !

Notez que il n'y avait pas d'étape de compilation (`build`) pour les paquets Astro. Tout type de fichier pris en charge nativement par Astro, tel que `.astro`, `.ts`, `.jsx`, et `.css`, peut être publié directement sans étape de compilation.

Si vous avez besoin d'un autre type de fichier qui n'est pas pris en charge nativement par Astro, ajoutez une étape de compilation à votre paquet. Cet exercice avancé est laissé à votre discrétion.

## Bibliothèque d'intégrations

Partagez votre travail en ajoutant votre intégration à notre [bibliothèque d'intégrations](https://astro.build/integrations) !

:::tip
Vous avez besoin d'aide pour construire votre intégration, ou vous voulez simplement rencontrer d'autres créateurs d'intégrations ? Nous avons un canal dédié `#integrations` sur notre [serveur Discord](https://astro.build/chat). Venez nous saluer !
:::

### Données du fichier `package.json`

La bibliothèque est automatiquement mise à jour chaque semaine, récupérant chaque paquet publié sur npm avec le mot-clé `astro-component`, `astro-integration` ou `withastro`.

La bibliothèque d'intégration lit les données `name`, `description`, `repository`, et `homepage` de votre `package.json`.

Les avatars sont une bonne façon de mettre en évidence votre marque dans la bibliothèque ! Une fois que votre paquet est publié, vous pouvez [créer un ticket GitHub](https://github.com/withastro/astro.build/issues/new/choose) avec votre avatar attaché et nous l'ajouterons à la liste.

:::tip
 Besoin d'écraser les informations que notre bibliothèque lit à partir de npm ? Pas de problème ! [Créez un ticket GitHub](https://github.com/withastro/astro.build/issues/new/choose) avec les informations mises à jour et nous allons nous assurer que les informations personnalisées `name`, `description`, ou `homepage` sont bien utilisées à la place.
:::

### Catégories

En plus du mot-clé obligatoire `astro-component`, `astro-integration` ou `withastro`, des mots-clés spéciaux sont également utilisés pour organiser automatiquement les paquets. L'inclusion de l'un des mots-clés ci-dessous ajoutera votre intégration à la catégorie correspondante dans notre bibliothèque d'intégrations.

| Catégorie              | Mots-clés                                    |
|--------------------    |----------------------------------------------|
| Accessibilité          | `a11y`, `accessibility`                      |
| Adapteurs              | `astro-adapter`                              |
| Analyse de données     | `analytics`                                  |
| CSS + UI               | `css`, `ui`, `icon`, `icons`, `renderer`     |
| Frameworks             | `renderer`                                   |
| Chargeurs de contenu   | `astro-loader`                               |
| Images + Média         | `media`, `image`, `images`, `video`, `audio` |
| Performance + SEO      | `performance`, `perf`, `seo`, `optimization` |
| Barre d'outils Dev     | `devtools`, `dev-overlay`, `dev-toolbar`     |
| Utilitaires            | `tooling`, `utils`, `utility`                |

Les paquets qui n'incluent aucun mot-clé correspondant à une catégorie seront affichés comme `Uncategorized`.

## Partager

Nous vous encourageons à partager votre travail et nous apprécions vraiment voir ce que nos talentueux Astronautes créent. Venez partager vos créations avec nous sur notre [Discord](https://astro.build/chat) ou mentionnez [@astrodotbuild](https://twitter.com/astrodotbuild) dans un Tweet !
